<template>
  <div
    id="asthmaQuestionnaireForm-TRACT"
    class="asthmaQuestionnaireForm-TRACT-container"
  >
    <div style="text-align: right; color: #606266">{{ title }}</div>
    <el-form ref="formRef" :rules="rules" :model="form" label-position="top">
      <radio-form
        v-model="form.attr1"
        :disabled="disabled"
        prop="attr1"
        title="1. 在过去4周内，孩子受到呼吸问题（比如喘息、咳嗽或呼吸短促）的困扰有多频繁 ？"
        :items="[
          { label: '20', value: '根本没有(20分)' },
          { label: '15', value: '1次或2次(15分)' },
          { label: '10', value: '每周1次(10分)' },
          { label: '5', value: '任一周2次或3次(5分)' },
          { label: '0', value: '任一周4次或更多次(0分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr2"
        :disabled="disabled"
        prop="attr2"
        title="2. 在过去4周内，孩子因呼吸问题（喘息、咳嗽、呼吸短促）在晚上醒来有多频繁 ？"
        :items="[
          { label: '20', value: '根本没有(20分)' },
          { label: '15', value: '1次或2次(15分)' },
          { label: '10', value: '每周1次(10分)' },
          { label: '5', value: '任一周2次或3次(5分)' },
          { label: '0', value: '任一周4次或更多次(0分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr3"
        :disabled="disabled"
        prop="attr3"
        title="3. 在过去4周内，孩子的呼吸问题（比如喘息、咳嗽或呼吸短促）
        在多大程度上干扰他或她玩耍、上学或进行同龄儿童应该进行的平常活动的能力 ？"
        :items="[
          { label: '20', value: '根本没有(20分)' },
          { label: '15', value: '轻微(15分)' },
          { label: '10', value: '中等(10分)' },
          { label: '5', value: '相当大(5分)' },
          { label: '0', value: '极大(0分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr4"
        prop="attr4"
        :disabled="disabled"
        title="4. 在过去3个月内，您需要使用快速缓解药物（博利康尼、沙丁胺醇）来治疗孩子的呼吸问题（喘息、咳嗽、呼吸短促）有多频繁 ？"
        :items="[
          { label: '20', value: '根本没有(20分)' },
          { label: '15', value: '1次或2次(15分)' },
          { label: '10', value: '每周1次(10分)' },
          { label: '5', value: '任一周2次或3次(5分)' },
          { label: '0', value: '任一周4次或更多次(0分)' },
        ]"
      ></radio-form>
      <radio-form
        v-model="form.attr5"
        prop="attr5"
        :disabled="disabled"
        title="5. 在过去12个月内，孩子需要全身糖皮质激素（口服泼尼松或泼尼松龙、注射甲泼尼龙或琥珀酸氢化可的松）
        或加用高剂量局部糖皮质激素（1mg 布地奈德或其他等效ICS/次）来治疗其他药物无法控制的呼吸问题的频次 ？"
        :items="[
          { label: '20', value: '从来没有(20分)' },
          { label: '15', value: '1次(15分)' },
          { label: '10', value: '2次(10分)' },
          { label: '5', value: '3次(5分)' },
          { label: '0', value: '4次或者更多次(0分)' },
        ]"
      ></radio-form>
    </el-form>
    <div class="grade-footer">
      <span>
        总分（TRACT）
        <el-tag :type="gradeType">{{ grade }}</el-tag>
        分
      </span>
      <el-tag type="danger">≤79未控制</el-tag>
      <el-tag type="success">≥80得到控制</el-tag>
    </div>
    <div class="footer" v-if="!disabled">
      <!-- <el-button v-print="printObj">打印筛查表</el-button> -->
      <!-- <el-button type="primary" @click="onSubmit(form)">保存</el-button> -->
      <debouncebtn
        class="footer-button"
        type="primary"
        @debounce="onSubmit(form)"
      >
        保存
      </debouncebtn>
    </div>
  </div>
</template>
<script>
  import radioForm from '@/components/RadioForm'
  import { ref, computed, reactive, onBeforeMount } from 'vue'
  import { queryInfo, save } from '@/api/modules/reception.js'
  import { ElMessage } from 'element-plus'
  import debouncebtn from '@/components/DebounceBtn'
  export default {
    components: { radioForm, debouncebtn },
    name: 'asthmaQuestionnaireForm-TRACT',
    props: { id: Number, pid: Number },
    emits: ['success'],
    data() {
      return {
        title: 'TRACT评估量表(0岁<x≤5岁)',
        printObj: {
          id: 'asthmaQuestionnaireForm-TRACT',
          preview: false,
          previewTitle: '点击下方按钮进行打印',
          popTitle: '儿童哮喘与过敏性疾病筛查表',
          extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
        },
      }
    },
    setup(props, context) {
      let day = ref(null)
      let label = ref(label)
      let checkLable = ref([])
      const print = function () {}
      // 表单相关
      const form = reactive({
        attr1: null,
        attr2: null,
        attr3: null,
        attr4: null,
        attr5: null,
      })
      // 表单相关
      const formRef = ref(null)
      const rules = {
        attr1: [{ required: true, message: '请选择', trigger: 'change' }],
        attr2: [{ required: true, message: '请选择', trigger: 'change' }],
        attr3: [{ required: true, message: '请选择', trigger: 'change' }],
        attr4: [{ required: true, message: '请选择', trigger: 'change' }],
        attr5: [{ required: true, message: '请选择', trigger: 'change' }],
        // attr6: [{ required: true, message: '请选择', trigger: 'change' }],
        // attr7: [{ required: true, message: '请选择', trigger: 'change' }],
        // attr8: [{ required: true, message: '请选择', trigger: 'change' }],
        // attr9: [{ required: true, message: '请选择', trigger: 'change' }],
      }
      const onSubmit = function (form) {
        formRef.value.validate((valid) => {
          if (valid) {
            form['patientId'] = props.pid
            form['screeningType'] = 0
            form['childType'] = 'TRACK'
            save(form).then((res) => {
              ElMessage.success(res.message)
              context.emit('success')
            })
          } else {
            ElMessage.warning('请填写完毕')
          }
        })
      }
      // 初始化相关
      let disabled = ref(false)
      onBeforeMount(() => {
        if (props.id) {
          // 是查看
          disabled.value = true
          loadData({ id: props.id })
        }
      })

      const loadData = async function (params) {
        const res = await queryInfo(params)
        Object.keys(res.data).forEach((item) => {
          if (form[item] !== undefined) {
            form[item] = res.data[item] + ''
          }
        })
      }
      const gradeType = computed(() => {
        if (grade.value >= 80) {
          return 'success'
        } else {
          return 'danger'
        }
      })
      let grade = computed(() => {
        let tmp = 0
        Object.keys(form).forEach((item) => {
          // 等于0或null
          if (form[item]) tmp += parseInt(form[item])
        })
        return isNaN(tmp) ? '暂无' : tmp
      })
      return {
        day,
        label,
        checkLable,
        print,
        onSubmit,
        gradeType,
        grade,
        form,
        disabled,
        formRef,
        rules,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .asthmaQuestionnaireForm-TRACT-container {
    padding: 0px 22px;
    .seciton-header {
      margin-top: 22px;
      height: 44px;
    }
    .input {
      display: inline-block;
      width: 50px;
      :deep(.el-input__inner) {
        border-radius: 0;
        border: 0;
        padding-left: 0;
        padding-right: 0;
        box-shadow: none !important;
        border-bottom: 1px solid #d9d9d9;
        vertical-align: middle;
        height: 30px;
        font-size: 17px;
        text-align: center;
      }
    }
    .grade-footer {
      margin-top: 22px;
      .el-tag:not(:first-child) {
        margin-left: 12px;
      }
    }
    .footer {
      display: flex;
      justify-content: flex-end;
    }
  }
  //一定全局定义样式
  @media print {
    //打印的样式
    #frames {
      // width: 100%;
      // height: calc(100vh - 220px);
    }
  }
</style>
